<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<!-- 二、外部样式表：按照页面简易结构添加对应css -->
		<link rel="stylesheet" href="css/header.css" >
		<link rel="stylesheet" href="css/main.css" >
		<link rel="stylesheet" href="css/footer.css" >
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				var se=$("#mym").offset().top;
				$(window).scroll(function(){
					var st=$(window).scrollTop();
					if(st>se){
						$("#mym").addClass("sticky");
						}else{
							$("#mym").removeClass("sticky");
						}
					
				});
			});
		</script>
		<style>
			#mym{
				width: 1104px;
				background-color: #e0e0e0;
			}
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<!-- html结构 简易三层结构
		【结构化】语义化标记：header、main、footer
		【替代div+别名、有利于SEO优化】
		-->
		
		<header>
			
			
			<!-- 两列布局   起别名 id用于定位  class微调-->
			<!-- 中控区：页面两侧留白，控制整页内容宽度  -->
			<div id="wrapper">
				<div class="head_left">
					<ul>
						<li><a href="">小米网</a></li>
						<li><a href="">MIUI</a></li>
						<li><a href="">米聊</a></li>
						<li><a href="">游戏</a></li>
						<li><a href="">多看阅读</a></li>
						<li><a href="">云服务</a></li>
						<li><a href="">小米网移动版</a></li>
						<li><a href="">问题反馈</a></li>
						<li><a href="" class="c">Select Region</a></li>
					</ul>
					     </div>
				<div class="head_right">
					<ul>
						<!-- 精灵图使用   后缀.icon 
						   1.使用文本样式元素补位：i、s、b、u
						   2.使用矢量图.png[不失真]，icon存入png
						   好处：避免多次起名，减少服务器请求
						   3.使用内边距，文本样式【撑大】
						   4.如果是用矢量图：精灵图模式，需要定位
						   -->
					<li class="right"><i class="shop"></i><a href="" class="f">购物车（0）</a></li>
					<li><a href="" class="d">注册</a></li>
					<li><a href="">登入</a></li>
				</ul>
				</div>
			</div>
		</header>
		<main>
		<div id="wrap">
			<div id="mym">
			<div class="main_left">
				<ul>
					<li class="mi"><i class="logo"></i></li>
					<li class="tv"><i class="img"></i></li>
					<li><a href="">小米盒子</a></li>
					<li><a href="">红米</a></li>
					<li><a href="">平板</a></li>
					<li><a href="">电视</a></li>
					<li><a href="">盒子</a></li>
					<li><a href="">路由器</a></li>
					<li><a href="">智能硬件</a></li>
					<li><a href="">服务</a></li>		
					<li><a href="">社区</a></li>	
				</ul>
				</div>
				<div class="main_right">
					<ul>
						<li><a href="" class="w">小米4c</a></li>
						<li><a href="" class="f">平衡车</a></li>
						<li class="so"><i class="img"></i></li>
						<li class="br"></li>
				</div>
				</div>
				<!-- 左栏区 -->
 <aside>
				 <script src="js/jquery-1.11.1.js"></script>
				     <ul>
						  <div class="out">
				          <li>手机 平板 电话卡<span>></span><div class="submenu">
					       <div style="float:left; margin-right:20x;"><img src="img/phone_img.png"></div>
					       <div style="float:left; margin-right:40px;"><a>小米手机5</a><a>小米手机4S</a><a>小米Note</a><a>小米手机4</a><a>小米手机4c</a><a>红米Note 3</a></div>
					       <div style="float:left; padding-top:4px; margin-right:33px;">
					           <div class="xuangou"><a href="#">选购</a></div>
					           <div class="xuangou"><a href="#">选购</a></div>
					           <div class="xuangou"><a href="#">选购</a></div>
					           <div class="xuangou"><a href="#">选购</a></div>
					           <div class="xuangou"><a href="#">选购</a></div>
					           <div class="xuangou"><a href="#">选购</a></div>
					       </div>
					       <div style="float:left; margin-right:13px;"><img src="img/phone_img01.png"></div>
					       <div style="float:left; margin-right:33px;"><a>红米手机3</a><a>小米平板2</a><a>电信版</a><a>合约机</a><a>对比手机</a><a>电话卡</a></div>
					       <div style="float:left; padding-top:4px; margin-right:33px;">
					           <div class="xuangou"><a href="#">选购</a></div>
					           <div class="xuangou"><a href="#">选购</a></div>
					           <div class="xuangou"><a href="#">选购</a></div>
					           <div class="xuangou"><a href="#">选购</a></div>
					           <div class="xuangou"><a href="#">选购</a></div>
					           <div class="xuangou"><a href="#">选购</a></div>
						                      </div>
						                  </div>
										  </div>
										  </li>
							<script>
								$(function() {
								    // 鼠标移入菜单项时显示隐藏的div
								    $('.out').hover(function(){
								            $(this).addClass('submenu');
								           $('.submenu').css('display', 'block');}, // 显示
								        function() {
								            $(this).removeClass('submenu');
								            $('.submenu').css('display', 'none');} // 隐藏
								    );
								});
								// 鼠标移入div仍然显示
								$('.submenu').mouseenter(function(){
								$('.submenu').css('display', 'block');
								});
								// 移出-隐藏
								$('.submenu').mouseleave(function(){
								$('.submenu').css('display', 'none');
								});
							</script>			  
				          <li>电视 盒子 <span>></span></li>
				          <li>移动电源 插线板 <span>></span></li>
				          <li>耳机 音箱 <span>></span></li>
				          <li>电池 存储卡 <span>></span></li>
				          <li>保护套 后盖 <span>></span></li>
				          <li>贴膜 其他配件 <span>></span></li>
				          <li>米兔 服装 <span>></span></li>
				          <li>箱包 其他周边 <span>></span></li>
						  
				      </ul>
			 </aside>
				<!-- 轮播图  结构化元素：图片、图标、代码片段-->
				<figure>
					<div class="ga">
						<div id="animation"></div>
							<div class="banner" id="lazyload">
								<ul>
									<li><img src="img/banner01.jpg" alt="" width="890px" height="415px"></li>
									<li><img src="img/banner02.jpg" alt="" width="890px" height="415px"></li>
									<li><img src="img/banner03.jpg" alt="" width="890px" height="415px"></li>
									<li><img src="img/banner04.jpg" alt="" width="890px" height="415px"></li>
									<li><img src="img/banner05.jpg" alt="" width="890px" height="415px"></li>
								</ul>
							</div>
						</div>
					</div>
					<script src="js/highlight.pack.js"></script>
					<script src="js/jquery-1.11.0.min.js"></script>
					<script src="js/jquery.terseBanner.min.js"></script>
					<script src="js/script.js"></script>
				</figure>
		</div>
		<div id="main_2">
			<div class="main_2">
				<ul>
					<li ><a href=""><img src="img/le	ft.png" alt="" width="213px" height="153px"/></a></li>
					<li ><a href=""><img src="img/subnav_icon01.png" alt="" width="284px" height="153px"/></a></li>
					<li><a href=""><img src="img/subnav_icon02.jpg" alt="" width="284px" height="153px"/></a></li>
					<li class="c"><img src="img/subnav_icon03.png" alt="" width="282px" height="153px"/></a></li>
				</ul>
			</div>
			<div class="star">
				<div class="single">
			    		小米明星单品
			        <div class="right-btn">&gt;</div>
			        <div class="left-btn">&lt;</div>
			    </div>
			    <div class="products-box">
			    	<div class="products-bigbox">
			            <div class="products" style="border-top:1px solid #ffac13; background:#fafafa url(img/chazuo.png) center 46px no-repeat;">
			                <p class="ziti">小米智能插座 基础班</p>	
			                <p class="ziti" style=" margin-top:10px; color:#b0b0b6;">手机远程遥控，让普通电器变智能</p>
			                <p style="color:#ff6709; margin-top:15px;">49元</p>
			            </div>
			            <div class="products" style="border-top:1px solid #83c44e;background:#fafafa url(img/jinghuaqi.png) center 24px no-repeat;">
			                <p class="ziti">小米空气净化器2</p>	
			                <p style=" margin-top:10px; color:#b0b0b6;">净化能力高达310m3/h</p>
			                <p style="color:#ff6709; margin-top:15px;">699元</p>
			            </div>
			            <div class="products" style="border-top:1px solid #2196f3;background:#fafafa url(img/chaban.png) center 77px no-repeat;">
			                <p class="ziti">小米智能插线板</p>	
			                <p style=" margin-top:10px; color:#b0b0b6;">手机远程控制家中电器，智能节电</p>
			                <p style="color:#ff6709; margin-top:15px;">69元</p>
			            </div>
			            <div class="products" style="border-top:1px solid #e53935;background:#fafafa url(img/erji.png) center 36px no-repeat;">
			                <p class="ziti">小米圈铁耳机</p>	
			                <p style=" margin-top:10px; color:#b0b0b6;">动圈+动铁，双发声单元</p>
			                <p style="color:#ff6709; margin-top:15px;">69元</p>
			            </div>
			            <div class="products" style="margin-right:0;border-top:1px solid #00c0a5;background:#fafafa url(img/luyouqi.png) center 34px no-repeat;">
			                <p class="ziti">小米路由器 青春版</p>	
			                <p style=" margin-top:10px; color:#b0b0b6;">将高性能路由器，凝聚于掌心大小</p>
			                <p style="color:#ff6709; margin-top:15px;">79元</p>
			            </div>
			        </div>
					</div>
					<div class="clearfix"></div>
			    </div>
			    <div class="hardware-box">
			        	<div class="hardware">
			            	智能硬件
			                <img style="float:right;" src="img/hardware_morebtn.png">
			                <a href="#">查看全部</a>
			            </div>
			            <div class="kidwatch">
			            	<p style="font-size:24px; font-weight:normal; margin-top:57px;">米兔儿童电话手表</p>
			                <p style="font-size:16px; margin-top:14px; color:#333;">安全防走失，宝贝的贴身护卫</p>
			                <p style="margin-top:34px; font-size:30px; color:#00a8ff; font-family:Century Gothic;">299<a style="font-size:14px;">元</a></p>
			            </div>
			            <div class="hardware-right">
			            	<div class="hardwareTopbox">
			                    <div class="content" style="background:#fff url(img/haraware_tizhongcheng.png) center 105px no-repeat;">
			                        <p class="ziti">小米体重秤</p>	
			                        <p style=" margin-top:9px; color:#b0b0b6;">高精度压力传感器，手机管理全家健康</p>
			                        <p style="color:#ff6709; margin-top:13px;">99元</p>
			                    </div>
			                    <div class="content" style="background:#fff url(img/haraware_luyouqi.png) center 18px no-repeat;">
			                        <p class="ziti">小米路由器3</p>	
			                        <p style=" margin-top:9px; color:#b0b0b6;">更安全更稳定，安全发售</p>
			                        <p style="color:#ff6709; margin-top:13px;">149元</p>
			                    </div>
			                    <div class="content" style="background:#fff url(img/haraware_shouhuan.png) center 18px no-repeat;">
			                        <p class="ziti">小米手环 光感版</p>	
			                        <p style=" margin-top:9px; color:#b0b0b6;">实时监测心率，科学运动</p>
			                        <p style="color:#ff6709; margin-top:13px;">99元</p>
			                    </div>
			                    <div class="content" style="margin-right:0; background:#fff url(img/haraware_anfang.png) center 18px no-repeat;">
			                        <p class="ziti">小米智能安防套装</p>	
			                        <p style=" margin-top:9px; color:#b0b0b6;">智能警戒，为您的家增添一份安心</p>
			                        <p style="color:#ff6709; margin-top:13px;">699元</p>
			                    </div>
			                 </div>
			                 <div class="hardwareBottomBOX">
			                    <div class="content" style="background:#fff url(img/haraware_xiaoyi.png) center 18px no-repeat;">
			                        <p class="ziti">小米运动相机</p>	
			                        <p style=" margin-top:9px; color:#b0b0b6;">边玩边录边拍，手机随时分享</p>
			                        <p style="color:#ff6709; margin-top:13px;">399元</p>
			                    </div>
			                    <div class="content" style="background:#fff url(img/haraware_xieya.png) center 18px no-repeat;">
			                        <p class="ziti">iHealth智能血压计（蓝牙版）</p>	
			                        <p style=" margin-top:9px; color:#b0b0b6;">送给父母的健康礼物</p>
			                        <p style="color:#ff6709; margin-top:13px;">199元</p>
			                    </div>
			                    <div class="content" style="background:#fff url(img/haraware_shexiangtou.png) center 18px no-repeat;">
			                        <p class="ziti">小米智能摄像机 夜视版</p>	
			                        <p style=" margin-top:9px; color:#b0b0b6;">能看能听能说，手机远程观看</p>
			                        <p style="color:#ff6709; margin-top:13px;">149元</p>
			                    </div>
			                    <div class="content" style="margin-right:0; background:#fff url(img/haraware_light.png) center 30px no-repeat;">
			                        <p class="ziti">Yeelight床头灯</p>	
			                        <p style=" margin-top:9px; color:#b0b0b6;">触摸式操作，给卧室1600万种颜色</p>
			                        <p style="color:#ff6709; margin-top:13px;">699元</p>
			                    </div>
			                  </div>
			            </div>
						<div class="dapei-box">
						    	<div class="dapei">
						        	搭配
						            <ul>
						            	<li class="current">热门</li>
						                <li>耳机音箱</li>
						                <li>电源</li>
						                <li style="margin-right:0;">电池储存卡</li>
						            </ul>
						        </div>
						        <div class="dapeiLeftBox">
						        	<div class="content">
						            	<img src="img/dapei_icon01.png">
						            </div>
						        	<div class="content">
						            	<img src="img/dapei_icon02.png">
						            </div>
						        </div>
						        <div class="dapeiRightBox">
						        	<div class="TopBox">
						                <div class="content" style="background:#fff url(img/dapei_icon03.png) center 41px no-repeat;">
						                    <p class="ziti">小米路由器3</p>	
						                    <p style=" margin-top:10px; color:#b0b0b6;">更安全更稳定，安全发售</p>
						                    <p style="color:#ff6709; margin-top:15px;">149元</p>
						                    
						                </div>
						                <div class="content" style="background:#fff url(img/dapei_icon04.png) center 41px no-repeat;">
						                    <p class="ziti">小米手环 光感版</p>	
						                    <p style=" margin-top:10px; color:#b0b0b6;">实时监测心率，科学运动</p>
						                    <p style="color:#ff6709; margin-top:15px;">99元</p>
						                </div>
						                <div class="content" style=" background:#fff url(img/dapei_icon05.png) center 80px no-repeat;">
						                    <p class="ziti">小米智能安防套装</p>	
						                    <p style=" margin-top:10px; color:#b0b0b6;">智能警戒，为您的家增添一份安心</p>
						                    <p style="color:#ff6709; margin-top:15px;">699元</p>
						                </div>
						                <div class="content" style="margin-right:0;background:#fff url(img/dapei_icon06.png) center 41px no-repeat;">
						                    <p class="ziti">小米运动相机</p>	
						                    <p style=" margin-top:10px; color:#b0b0b6;">边玩边录边拍，手机随时分享</p>
						                    <p style="color:#ff6709; margin-top:15px;">399元</p>
						                </div>
						            </div>
						            <div class="BottomBox">
						                <div class="content" style="background:#fff url(img/dapei_icon07.png) center 44px no-repeat;">
						                    <p class="ziti">小米智能摄像机 夜视版</p>	
						                    <p style=" margin-top:10px; color:#b0b0b6;">能看能听能说，手机远程观看</p>
						                    <p style="color:#ff6709; margin-top:15px;">149元</p>
						                </div>
						                <div class="content" style="background:#fff url(img/dapei_icon08.png) center 50px no-repeat;">
						                    <p class="ziti">小米智能摄像机 夜视版</p>	
						                    <p style=" margin-top:10px; color:#b0b0b6;">能看能听能说，手机远程观看</p>
						                    <p style="color:#ff6709; margin-top:15px;">149元</p>
						                </div>
						                <div class="content" style="background:#fff url(img/dapei_icon09.png) center 53px no-repeat;">
						                    <p class="ziti">小米智能摄像机 夜视版</p>	
						                    <p style=" margin-top:10px; color:#b0b0b6;">能看能听能说，手机远程观看</p>
						                    <p style="color:#ff6709; margin-top:15px;">149元</p>
						                </div>
						                <div class="content" style="margin-right:0; background-color:#f5f5f5;">
						                    <div class="content-top" style="margin-bottom:14px;"><img src="img/content-top_icon01.png"></div>
						                    <div class="content-top"><img src="img/content-top_icon02.png"></div>
						                </div>
						            </div>
						        </div>
						            </div>
						    </div>
							<div class="dapei">
							        	周边
							            <ul>
							            	<li>热门</li>
							                <li>服装</li>
							                <li>米兔</li>
							                <li class="current">生活周边</li>
							                <li style="margin-right:0;">箱包</li>
							            </ul>
							        </div>
				<div class="dapeiLeftBox">
				        	<div class="content">
				            	<img src="img/peijian_icon01.png">
				            </div>
				        	<div class="content">
				            	<img src="img/peijian_icon02.png">
				            </div>
				        </div>
				<div class="dapeiRightBox">
				        	<div class="TopBox">
				                <div class="content" style="background:#fff url(img/peijian_icon03.png) center 36px no-repeat;">
				            	<p class="ziti">小米金属鼠标垫 小号</p>	
				        		<p style="color:#ff6709; margin-top:10px;">49元</p>
				            	<p style=" margin-top:15px; color:#b0b0b6;">6483人评价</p>
				                
				            </div>
				            <div class="content" style="background:#fff url(img/peijian_icon04.png) center 36px no-repeat;">
				            	<p class="ziti">小米皮质记事本</p>	
				        		<p style="color:#ff6709; margin-top:10px;">19元</p>
				            	<p style=" margin-top:15px; color:#b0b0b6;">3050人评价</p>
				            </div>
				            <div class="content" style=" background:#fff url(img/peijian_icon05.png) center 36px no-repeat;">
				            	<p class="ziti">小米LED随身灯 增强版</p>	
				        		<p style="color:#ff6709; margin-top:10px;">19.9元</p>
				            	<p style=" margin-top:15px; color:#b0b0b6;">5.6万人评价</p>
				            </div>
				            <div class="content" style="margin-right:0;background:#fff url(img/peijian_icon06.png) center 36px no-repeat;">
				            	<p class="ziti">手机支架 小蜜蜂</p>	
				        		<p style="color:#ff6709; margin-top:10px;">19元</p>
				            	<p style=" margin-top:15px; color:#b0b0b6;">6.9万人评价</p>
				            </div>
				            </div>
				            <div class="BottomBox">
				               <div class="content" style="background:#fff url(img/peijian_icon07.png) center 45px no-repeat;">
				                    <p class="ziti">小米防尘塞 MI标</p>	
				                    <p style="color:#ff6709; margin-top:10px;">3.9元</p>
				                    <p style=" margin-top:15px; color:#b0b0b6;">5.6万人评价</p>
				                </div>
				                <div class="content" style="background:#fff url(img/peijian_icon08.png) center 45px no-repeat;">
				                    <p class="ziti">小米智能摄像机 夜视版</p>	
				                    <p style="color:#ff6709; margin-top:10px;">149元</p>
				                    <p style=" margin-top:15px; color:#b0b0b6;">8461人评价</p>
				                </div>
				                <div class="content" style="background:#fff url(img/peijian_icon09.png) center 45px no-repeat;">
				                    <p class="ziti">小米电源线收纳盒</p>	
				                    <p style="color:#ff6709; margin-top:10px;">39元</p>
				                    <p style=" margin-top:15px; color:#b0b0b6;">8461人评价</p>
				                </div>
				                <div class="content" style="margin-right:0; background-color:#f5f5f5;">
				                    <div class="content-top" style="margin-bottom:14px;"><img src="img/peijian_icon10.png"></div>
				                    <div class="content-top"><img src="img/content-top_icon02.png"></div>
				                </div>
				              </div>
				        </div>	
							<div class="dapei">
							        	配件
							            <ul>
							            	<li class="current">热门</li>
							                <li>保护套</li>
							                <li>后盖</li>
							                <li>贴膜</li>
							                <li style="margin-right:0;">其他配件</li>
							            </ul>
							        </div>
						<div class="dapeiLeftBox">
						        	<div class="content">
						            	<img src="img/zhoubian_icon01.png">
						            </div>
						        	<div class="content">
						            	<img src="img/zhoubian_icon02.png">
						            </div>
						        </div>	
						<div class="dapeiRightBox">
						        	<div class="TopBox">
						                <div class="content" style="background:#fff url(img/zhoubian_icon03.png) center 47px no-repeat;">
						            	<p class="ziti">小米自拍杆</p>	
						        		<p style="color:#ff6709; margin-top:10px;">49元</p>
						            	<p style=" margin-top:15px; color:#b0b0b6;">6.4万人评价</p>
						            </div>
						            <div class="content" style="background:#fff url(img/zhoubian_icon04.png) center 47px no-repeat;">
						            	<p class="ziti">小米手机5 钢化膜（0.22mm）</p>	
						        		<p style="color:#ff6709; margin-top:10px;">29元</p>
						            	<p style=" margin-top:15px; color:#b0b0b6;">1万人评价</p>
						            </div>
						            <div class="content" style=" background:#fff url(img/zhoubian_icon05.png) center 47px no-repeat;">
						            	<p class="ziti">红米手机Note3 钢化膜（0.22mm）</p>	
						        		<p style="color:#ff6709; margin-top:10px;">699元</p>
						            	<p style=" margin-top:15px; color:#b0b0b6;">5.6万人评价</p>
						            </div>
						            <div class="content" style="margin-right:0;background:#fff url(img/zhoubian_icon06.png) center 47px no-repeat;">
						            	<p class="ziti">小米Note 标准贴膜（2片装）</p>	
						        		<p style="color:#ff6709; margin-top:10px;">19元</p>
						            	<p style=" margin-top:15px; color:#b0b0b6;">2.1万人评价</p>
						            </div>
						            </div>
						            <div class="BottomBox">
						               <div class="content" style="background:#fff url(img/zhoubian_icon07.png) center 47px no-repeat;">
						                    <p class="ziti">小米随身WIFI</p>	
						                    <p style="color:#ff6709; margin-top:10px;">19.9元</p>
						                    <p style=" margin-top:15px; color:#b0b0b6;">30.1万人评价</p>
						                </div>
						                <div class="content" style="background:#fff url(img/zhoubian_icon08.png) center 47px no-repeat;">
						                    <p class="ziti">小米百变随身杯</p>	
						                    <p style="color:#ff6709; margin-top:10px;">39元</p>
						                    <p style=" margin-top:15px; color:#b0b0b6;">1.2万人评价</p>
						                </div>
						                <div class="content" style="background:#fff url(img/zhoubian_icon09.png) center 47px no-repeat;">
						                    <p class="ziti">小米手机5 硅胶保护套</p>	
						                    <p style="color:#ff6709; margin-top:10px;">69元</p>
						                    <p style=" margin-top:15px; color:#b0b0b6;">215人评价</p>
						                </div>
						                <div class="content" style="margin-right:0; background-color:#f5f5f5;">
						                    <div class="content-top" style="margin-bottom:14px;"><img src="img/zhoubian_icon10.png"></div>
						                    <div class="content-top"><img src="img/content-top_icon02.png"></div>
						                </div>
						              </div>
						        </div>
		<div class="reping-box">
    	<div class="reping">
        	热评产品   
        </div>
        <div class="hotproduct">
        	<img src="img/hotproduct_icon01.png">
            <div class="judge">
            	<p>超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</p>
                <h1>来自于 香草忘忧 的评价</h1>
                <a>米兔手机U盘</a><span style="color:#ff6700;">49.9元</span>
            </div>
        </div>
        <div class="hotproduct">
        	<img src="img/hotproduct_icon02.png">
            <div class="judge">
            	<p style="margin-bottom:52px;">绝对5星，音质挺好，包装也不错，物流也快</p>
                <h1>来自于 星星活火 的评价</h1>
                <a>小米活塞耳机 标准版</a><span style="color:#ff6700;">49.9元</span>
            </div>
        </div>
         <div class="hotproduct">
        	<img src="img/hotproduct_icon03.png">
            <div class="judge">
            	<p style="margin-bottom:52px;">做工没的说，摸起来非常细腻，而且比传统的插板稳固</p>
                <h1>来自于 林新城 的评价</h1>
                <a>小米插线板</a><span style="color:#ff6700;">49元</span>
            </div>
        </div>
        <div class="hotproduct" style="margin-right:0;"><img src="img/hotproduct_icon04.png">
        	<div class="judge">
            	<p style="margin-bottom:52px;">一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</p>
                <h1>来自于 人生如戏 的评价</h1>
                <a>小米头戴式耳机 标准版</a><span style="color:#ff6700;">499元</span>
            </div>
        </div>	
    </div>
	<div class="classify-box">
	    	<div class="classify">内容</div>
	        <div class="content" style="border-top:1px solid #ffac13;">
	        	<ul>
	            	<li style="font-size:16px; color:#ffac13; margin-bottom:25px;">图书</li>
	                <li style=" margin-bottom:10px;"><a href="#" style="font-size:20px; color:#333;">阿弥陀佛，么么哒</a></li>
	                <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:5px;">大冰新书，12个不舍得读完的、暖心</li>
	                <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:20px;">的，真实的江湖故事</li>
	                <li>9.99元</li>
	                <li><img src="img/classify_icon01.png" style="margin-left:auto; margin-right:auto; margin-top:32px;"></li>
	            </ul>
	        </div>
	        <div class="content" style="border-top:1px solid #83c44e;">
	        	<ul>
	            	<li style="font-size:16px; color:#83c44e; margin-bottom:25px;">主题</li>
	                <li style=" margin-bottom:10px;"><a href="#" style="font-size:20px; color:#333;">主题市场</a></li>
	                <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:5px;">众多个性主题、百变锁屏与自由桌面</li>
	                <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:20px;">让你的手机与众不同！</li>
	                <li>MIUI</li>
	                <li><img src="img/classify_icon02.png" style="margin-left:auto; margin-right:auto; margin-top:15px;"></li>
	            </ul>
	        </div>
	        <div class="content" style="border-top:1px solid #e53935;">
	        	<ul>
	            	<li style="font-size:16px; color:#e53935; margin-bottom:25px;">游戏</li>
	                <li style=" margin-bottom:10px;"><a href="#" style="font-size:20px; color:#333;">米柚手游模拟器</a></li>
	                <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:5px;"></li>
	                <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:39px;">在电脑上玩遍小米所有手游</li>
	                <li>免费</li>
	                <li><img src="img/classify_icon03.png" style="margin-left:auto; margin-right:auto; margin-top:47px;"></li>
	            </ul>
	        </div>
	        <div class="content" style="margin-right:0; border-top:1px solid #2196f3;">
	        	<ul>
	            	<li style="font-size:16px; color:#2196f3; margin-bottom:25px;">应用</li>
	                <li style=" margin-bottom:10px;"><a href="#" style="font-size:20px; color:#333;">2015年度应用</a></li>
	                <li style="font-size:12px; color:#b0b0b0; font-family:'宋体'; margin-bottom:39px;">精彩世界，尽情下载</li>
	               
	                <li>免费</li>
					
	                <li><img style="margin-left:auto; margin-right:auto; margin-top:46px;" src="img/classify_icon04.png"></li>
	            </ul>
	        </div>
	    </div>
		<div class="video-box">
		<div class="video">
		        		视频
		 <img style="float:right;" src="img/hardware_morebtn.png">
		 <a href="#" style="float:right; font-size:18px; margin-right:10px; color:#333;">查看更多</a>
		        </div>
		<div class="content">
		        	<img class="play" src="img/video_play.png">
		        	<img src="img/video_icon01.jpg">
		        	 <h1>笑喷了，沈腾爆笑出演，6集联播</h1>
		             <h2>小米Max沈腾爆笑预告全集</h2>
		        </div>
		<div class="content">
		        	<img class="play" src="img/video_play.png">
		       		<img src="img/video_icon02.jpg">
		            <h1>小米2016春季新品发布会</h1>
		             <h2>小米5 十余项黑科技亮相</h2>
		        </div>
		<div class="content">
		        	<img class="play" src="img/video_play.png">
		        	<img class="icon" src="img/video_icon03.jpg">
		            <h1>15秒了解小米5 有多快</h1>
		             <h2>华少用超快语速告诉你小米5 到底有多快</h2>
		        </div>
		<div class="content" style="margin-right:0;">
		        	<img class="play" src="img/video_play.png">
		        	<img src="img/video_icon04.jpg">
		        		<h1>《去探索》 小米年度品牌视频</h1>
		             	<h2>与小米一起探索黑科技</h2>
		        </div>	
											</div>
		</main>
		<footer>
			<div class="footer">
				<ul>
					<li style="background:url(img/footer_icon01.png) no-repeat 20px center;"><a href="#">1小时快修服务</a></li>
				    <li style="background:url(img/footer_icon02.png) no-repeat 20px center;"><a href="#">7天无理由退货</a></li>
				    <li style="background:url(img/footer_icon03.png) no-repeat 20px center;"><a href="#">15天免费换修</a></li>
				    <li style="background:url(img/footer_icon04.png) no-repeat 20px center;"><a href="#">满150元包邮</a></li>
				    <li style="background:url(img/footer_icon05.png) no-repeat 20px center;"><a href="#">520余家售后网点</a></li>
				    <div class="clearfix"></div>
				</ul>
				</div>
				<div class="line"></div>
				<!-- 帮助中心栏 -->
				<div class="footer_container">
				<div class="column"><h3>帮助中心</h3>
					<ul>
						<li><a href="#">购物指南</a></li>
						<li><a href="#">支付方式</a></li>
						<li><a href="#">配送方式</a></li>
					</ul>
				</div>
				<!-- 服务支持拦 -->
				<div class="column"><h3>服务支持</h3>
					<ul>
						<li><a href="#">售后服务</a></li>
						<li><a href="#">自助服务</a></li>
						<li><a href="#">相关下载</a></li>
					</ul>
				</div>
				<!-- 线下门店栏 -->
				<div class="column"><h3>线下门店</h3>
					<ul>
						<li><a href="#">小米之家</a></li>
						<li><a href="#">服务网店</a></li>
						<li><a href="#">线下专区</a></li>
					</ul>
				</div>
				<!-- 关于小米栏 -->
				<div class="column"><h3>关于小米</h3>
					<ul>
						<li><a href="#">了解小米</a></li>
						<li><a href="#">加入小米</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
				</div>
				<!-- 关于我们栏 -->
				<div class="column"><h3>关于我们</h3>
					<ul>
						<li><a href="#">新浪微博</a></li>
						<li><a href="#">小米部落</a></li>
						<li><a href="#">官方微信</a></li>
					</ul>
				</div>
				<!-- 特色服务栏 -->
				<div class="column"><h3>特色服务</h3>
					<ul>
						<li><a href="#">F码通道</a></li>
						<li><a href="#">小米移动</a></li>
						<li><a href="#">防伪查询</a></li>
					</ul>
				</div>
				<!-- 右侧栏：客服信息栏 -->
				<div class="column contact_column"><h3>400-100-5678</h3>
				<p>周一至周日 8:00-18:00</p>
				<p>（仅收市话费）</p>
				<a href="#">24小时在线客服</a>
				</div>
				</div>
				<div class="team-box">
					<div class="team">
				    	<div class="logo"><img src="img/team_logo.png"></div>
				        <div style="width:700px; float:left; margin-bottom:30px;">
				        	<p><a href="#">小米网</a><a href="#">MIUI</a><a href="#">米聊</a><a href="#">多看书城</a><a href="#">小米路由器</a><a href="#">视频电话</a>
				        	<a href="#">小米后院</a><a href="#">小米天猫店</a><a href="#">小米淘宝直营店</a><a href="#">小米网盟</a><a href="#">问题反馈</a>
				            <a href="#">Select Region</a>
				        </p>
				        <p style="margin-left:5px;">©mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 违法和不良信息举报
				        	电话：185-0130-1238</p>
				        <p style="margin-left:5px;">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
				        <div class="clearfix"></div>
				        </div>
				        <div class="safe">
				        	<img style="float:left; margin-right:5px;" src="img/safe_icon01.png">
				            <span>诚信网站师范企业</span>
				            <img style="float:left; margin-right:5px;" src="img/safe_icon02.png">
				            <span>可信网站信用评价</span>
				            <img style="float:left; margin-right:5px;" src="img/safe_icon03.png">
				            <span style="margin-right:0;">网上交易保障中心</span>
				            <div class="clearfix"></div>
				        </div>
				    </div>
				    <div class="clearfix"></div>
				    <div class="word">探索黑科技，小米为发烧而生</div>
				</div>
		</footer>
	</body
</html>
